<template>
  <div class="mod-user-course-progress">
    <avue-crud
      ref="crudRef"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @search-change="onSearch"
      @on-load="getDataList"
      @refresh-change="refreshChange"
    >
      <template #isCompleted="scope">
        <el-tag
          v-if="scope.row.isCompleted === 1"
          type="success"
        >
          已完成
        </el-tag>
        <el-tag
          v-else
          type="info"
        >
          未完成
        </el-tag>
      </template>
      <template #isFreeView="scope">
        <el-tag
          v-if="scope.row.isFreeView === 1"
          type="success"
        >
          是
        </el-tag>
        <el-tag
          v-else
          type="info"
        >
          否
        </el-tag>
      </template>
      <template #menu-left>
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          @click="onAddOrUpdate()"
        >
          新增
        </el-button> -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="onBatchDelete()"
        >
          批量删除
        </el-button>
      </template>
      <template #menu="scope">
        <el-button
          type="primary"
          icon="el-icon-view"
          @click="onDetail(scope.row.id)"
        >
          详情
        </el-button>
        <!-- <el-button
          type="warning"
          icon="el-icon-edit"
          @click="onAddOrUpdate(scope.row.id)"
        >
          修改
        </el-button> -->
        <el-button
          type="info"
          icon="el-icon-video-play"
          @click="onUpdateVideoPosition(scope.row)"
        >
          更新视频位置
        </el-button>
        <el-button
          type="info"
          icon="el-icon-view"
          @click="onUpdateFreeView(scope.row)"
        >
          更新试看
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click.stop="onDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </avue-crud>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="refreshChange"
      @close="addOrUpdateVisible=false"
    />
    <detail-dialog
      v-if="detailVisible"
      ref="detailRef"
      @close="detailVisible=false"
    />
    <video-position-dialog
      v-if="videoPositionVisible"
      ref="videoPositionRef"
      @refresh-data-list="refreshChange"
      @close="videoPositionVisible=false"
    />
    <free-view-dialog
      v-if="freeViewVisible"
      ref="freeViewRef"
      @refresh-data-list="refreshChange"
      @close="freeViewVisible=false"
    />
  </div>
</template>

<script setup>
import { isAuth } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/course/userCourseProgress.js'
import AddOrUpdate from './add-or-update.vue'
import DetailDialog from './detail-dialog.vue'
import VideoPositionDialog from './video-position-dialog.vue'
import FreeViewDialog from './free-view-dialog.vue'

const dataList = ref([])
const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})
const dataListLoading = ref(false)
const addOrUpdateVisible = ref(false)
const detailVisible = ref(false)
const videoPositionVisible = ref(false)
const freeViewVisible = ref(false)
const searchParams = ref({})

const getDataList = (pageParam, params, done) => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/admin/userCourseProgress/page'),
    method: 'get',
    params: http.adornParams(Object.assign({
      current: pageParam == null ? page.currentPage : pageParam.currentPage,
      size: pageParam == null ? page.pageSize : pageParam.pageSize
    }, params))
  })
    .then(({ data }) => {
      dataList.value = data.records
      page.total = data.total
      dataListLoading.value = false
      if (done) done()
    })
}

const onSearch = (params, done) => {
  searchParams.value = params
  page.currentPage = 1
  getDataList(page, params, done)
}

const refreshChange = () => {
  getDataList(page, searchParams.value)
}

const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value.init(id)
  })
}

const onDetail = (id) => {
  detailVisible.value = true
  nextTick(() => {
    detailRef.value.init(id)
  })
}

const onUpdateVideoPosition = (row) => {
  videoPositionVisible.value = true
  nextTick(() => {
    videoPositionRef.value.init(row)
  })
}

const onUpdateFreeView = (row) => {
  freeViewVisible.value = true
  nextTick(() => {
    freeViewRef.value.init(row)
  })
}

const onDelete = (id) => {
  ElMessageBox.confirm('确定删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl(`/admin/userCourseProgress/del/${id}`),
      method: 'post'
    }).then(({ data }) => {
      ElMessage.success('删除成功')
      refreshChange()
    })
  }).catch(() => {})
}

const onBatchDelete = () => {
  const ids = crudRef.value.getSelectionRows().map(row => row.id)
  if (ids.length === 0) {
    ElMessage.warning('请先选择要删除的记录')
    return
  }
  ElMessageBox.confirm(`确定删除选中的 ${ids.length} 条记录吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/admin/userCourseProgress/batchDel'),
      method: 'post',
      data: ids
    }).then(({ data }) => {
      ElMessage.success('批量删除成功')
      refreshChange()
    })
  }).catch(() => {})
}
</script>

<style scoped>
.mod-user-course-progress {
  padding: 20px;
}
</style>

